*{
    box-sizing:border-box;
}

body{
    margin:0;
    padding:0;
}

.main{
    width: 100%;
}

ul.grid{
    list-style: none;
    margin:0;
    padding:0;
    position: relative;

    li{
        transform-style: preserve-3d;
        -webkit-perspective: 1300px;
        perspective: 1300px;
        position: absolute;
        margin-bottom: 24px;

        .figure{
            background-color: #E4E4E4;

            img{
                width: 100%;
            }

            .figcaption{
                padding: 24px;
            }
        }

    }
}

@media all and (min-width: 500px){
    ul.grid{
        li{
            width: 50%;
            margin: 24px 0;
            padding: 0 12px;
        }
    }

}

@media all and (min-width: 900px){
    ul.grid{
        width: 80%;
        margin: auto;
        li{
            width: 33%;
        }
    }

}

.grid.effect-5 li.animate {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -300px;
    transform-origin: 50% 50% -300px;
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -webkit-animation: fly .8s ease-in-out forwards;
    animation: fly .8s ease-in-out forwards;
}

@-webkit-keyframes fly {
    0% { }
    100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@keyframes fly {
    0% { }
    100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
}
